<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Jquery返回顶部demo</title>
    <style type="text/css">
        .goTop >img{
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .goTop{
            position: fixed;
            right : 20px;
            bottom : 20px;
        }
    </style>
</head>
<body>
<p>
   jquery返回顶部的插件
</p>

<p>
   向下滚动网页查看右下角
</p>

<p style="height: 600px ">向下滚动网页1</p>
<p style="height: 600px ">向下滚动网页2</p>
<p style="height: 600px ">向下滚动网页3</p>
<p style="height: 600px ">向下滚动网页4</p>
<p style="height: 600px ">向下滚动网页5</p>

<div class="goTop" id="js-go_top"><img src="icon_top.png" alt="回到顶部图片"></div>
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="GoToTop.js"></script>
<script>
    //示例
    $('#js-go_top').gotoTop({
        offset : 500, //距离顶部的位置
        speed : 300, //移动到顶部的速度
        /*     iconSpeed : 300, //icon动画样式的速度*/
        animationShow : {
            'transform' : 'translate(0,0)',
            'transition': 'transform .5s ease-in-out'
        }, //icon动画样式显示时
        animationHide : {
            'transform' : 'translate(80px,0)',
            'transition': 'transform .5s ease-in-out'
        } //icon动画样式隐藏时
    });
</script>
</body>
</html>